<template>
  <div class="wrap">
    <a-layout id="components-layout-demo-responsive">
      <a-layout-sider breakpoint="lg" collapsedWidth="0">
        <div class="logo" />
        <a-menu theme="dark" mode="inline" v-model="current" :defaultSelectedKeys="['4']">
          <a-menu-item key="userList" @click="MenuClick">
            <a-icon type="user" />
            <span class="nav-text">人员列表</span>
          </a-menu-item>
          <a-menu-item key="userDetail" @click="MenuClick">
            <a-icon type="video-camera" />
            <span class="nav-text">人员详情</span>
          </a-menu-item>
          <!-- <a-menu-item key="3">
            <a-icon type="upload" />
            <span class="nav-text">人员编辑页面</span>
          </a-menu-item>-->
        </a-menu>
      </a-layout-sider>
      <a-layout>
        <a-layout-header :style="{ background: '#fff', padding: '20px',height:'100px' }">
          <a-breadcrumb separator=">">
            <a-breadcrumb-item v-for="(item,index) in menus" :key="index">{{item.path}}</a-breadcrumb-item>
          </a-breadcrumb>
          <h2>{{title}}</h2>
        </a-layout-header>
        <a-layout-content :style="{ margin: '24px 16px 0' }">
          <router-view></router-view>
        </a-layout-content>
      </a-layout>
    </a-layout>
  </div>
</template>
<script>
export default {
  data () {
    return {
      menus: [{
        path: ''
      }],
      title: '',
      current: []
    }
  },
  methods: {
    MenuClick ({ item, key, keyPath }) {
      this.$router.push(key)
    }
  },
  created () {
    // console.log(this.menus)
    this.menus = this.$store.state.menus
    this.title = this.$store.state.title
    this.current = this.$store.state.current
    // console.log(this.menus)
  },
  updated () {
    this.menus = this.$store.state.menus
    this.title = this.$store.state.title
    this.current = this.$store.state.current
  }
}
</script>

<style lang="less" scope>
#components-layout-demo-responsive .logo {
  height: 32px;
  background: rgba(255, 255, 255, 0.2);
  margin: 16px;
}
.wrap {
  height: 100vh;
}
.ant-layout {
  height: 100%;
}
</style>
